
<template>
  <div class="aside">
    <!-- 滚动条暂不能滚动到指定位置 -->
    <div id="chatbox" class="sidebar_wrap">
      <client-only>
        <GeminiScrollbar
          ref="scroll"
          class="my-scroll-bar"
        >
          <ul>
            <li v-for="(v,index) in 20" :key="v">
              {{ index }}
            </li>
          </ul>
        </geminiscrollbar>
      </client-only>
    </div>

    <div class="right" @click="toBottom">
      右边按钮
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      height: 0
    }
  },
  mounted () {
    this.height = document.getElementById('chatbox').scrollHeight
  },
  methods: {
    toBottom () {
      this.$nextTick(() => {
        document.getElementById('chatbox').scrollTop = '9999'
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.aside {
  height: 100%;
  .sidebar_wrap {
    width: 210px !important;
    background-color: #304156;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10010000;
    overflow: hidden;
    .my-scroll-bar {
      /* height: calc(100% - 4rem); */
      height: 100%;
    }
    ul {
      li {
        margin: 10px;
      }
    }
  }
  .right {
    padding-left: 250px;
  }
}
</style>
